<template>
    <div class="localLife">
        <!-- 广告位 -->
        <div class="j_jypx_gg">
            <img src="../../assets/newimg/legal/list_banner4.png" alt="" />
        </div>
        <!-- 本地生活 -->
        <div class="j_title">
            <span>本地生活</span>
        </div>
        <div class="j_lstj_box">
            <!-- 选择部分 -->
            <nav class="storenav p search_list_dump">
                <ul>
                    <div
                        class="j_check_box"
                        v-for="(itemr, i) in navCheckDowList"
                        :key="i"
                    >
                        <li @click="navCheckClick(itemr)">
                            <span class="lb">{{ itemr.name }}</span>
                            <i
                                :class="{
                                    pd: itemr.checkType == 0,
                                    pc: itemr.checkType == 0 && itemr.ischeck,
                                    pr: itemr.checkType == 1,
                                    bpr1: itemr.checkType == 1 && itemr.ischeck,
                                    fitter: itemr.checkType == 2,
                                    listorimg: itemr.checkType == 3,
                                }"
                            ></i>
                        </li>
                        <div
                            class="shadow"
                            style="z-index: 99"
                            v-if="itemr.ischeck && itemr.checkType == 0"
                            @click="itemr.ischeck = !itemr.ischeck"
                        ></div>

                        <div class="j_sel_option" v-show="itemr.ischeck">
                            <ul class="j_sel_optionul">
                                <li
                                    :class="{
                                        j_sel_optionactive:
                                            itemr.checkName == item.nameli,
                                    }"
                                    v-for="(item, index) in itemr.checkList"
                                    :key="index"
                                    @click="changenavCheckFn(itemr, item)"
                                >
                                    <span>{{ item.nameli }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </ul>
            </nav>

            <!-- 列表部分 -->
            <div class="j_lstjlist">
                <div class="j_lstj_ul3">
                    <a href="">
                        <dl>
                            <dd>
                                <img
                                    src="/public/upload/local_life_img/2021/06-24/8d5ab3503713781e9c802ec997f91ad5.jpg"
                                    alt=""
                                />
                            </dd>
                            <dt>
                                <h1>333</h1>
                                <h3>
                                    <span>韩国料理</span>
                                    <span>装修精致</span>
                                </h3>
                                `
                                <h4>
                                    <span>韩国料理</span>
                                    <span>五道口</span>
                                    <span>人均89/位</span>
                                </h4>

                                <h5>
                                    <img
                                        src="../../assets/newimg/legal/bendi_icon_tuan.png"
                                        alt=""
                                    />
                                    <span>2-3人十三梯套餐韩国料理</span>
                                </h5>
                                <h6>
                                    <span>免预约</span>
                                    <span>随时退</span>
                                    <span>销量456</span>
                                </h6>

                                <div>
                                    <span>￥<b>319</b>元</span>
                                    <strong>￥450元</strong>
                                    <i>立即抢购</i>
                                </div>
                            </dt>
                        </dl>
                    </a>
                </div>
            </div>
        </div>
        <div class="zhanwei"></div>
    </div>
</template>

<script>
// import { axiosPost } from '../../axios';
// import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            navCheckDowList: [
                {
                    name: '热门推荐',
                    checkName: '火锅',
                    checkIndex: 0,
                    checkType: 0,
                    ischeck: false,
                    checkList: [
                        {
                            id: 0,
                            nameli: '火锅',
                        },
                        {
                            id: 1,
                            nameli: '小龙虾',
                        },
                        {
                            id: 2,
                            nameli: '烤肉',
                        },
                    ],
                },
                {
                    name: '服务范围',
                    checkName: '1km',
                    checkIndex: 0,
                    checkType: 0,
                    ischeck: false,
                    checkList: [
                        {
                            id: 0,
                            nameli: '1km',
                        },
                        {
                            id: 1,
                            nameli: '5km',
                        },
                        {
                            id: 2,
                            nameli: '10km',
                        },
                    ],
                },
                {
                    name: '销量',
                    checkName: true,
                    checkIndex: 0,
                    checkType: 1,
                    ischeck: false,
                    checkList: [],
                },
                {
                    name: '价格',
                    checkName: true,
                    checkIndex: 0,
                    checkType: 1,
                    ischeck: false,
                    checkList: [],
                },
            ],
        };
    },
    computed: {},
    mounted() {},
    methods: {
        // 点击 nav 选项操作
        navCheckClick(itemr) {
            // 筛选
            if (itemr.checkType == 2) {
                this.slideSearch = !this.slideSearch;
                return;
            }

            // 展示方式
            if (itemr.checkType == 3) {
                this.showType = !this.showType;
                return;
            }

            // 其他
            this.navCheckDowList = this.navCheckDowList.map((el) => {
                switch (el.checkType) {
                    case 0: // 没有子选项
                        if (!itemr.ischeck) {
                            el.ischeck = false;
                            if (el.name == itemr.name) {
                                el.ischeck = true;
                            }
                        } else {
                            el.ischeck = false;
                        }
                        break;
                    case 1:
                        if (el.name == itemr.name) {
                            el.ischeck = !el.ischeck;
                        }

                        break;
                    default:
                        break;
                }

                return el;
            });
        },
        // 导航子选项点击
        changenavCheckFn(itemr, item) {
            this.navCheckDowList = this.navCheckDowList.map((el) => {
                if (itemr.name == el.name) {
                    el.name = item.nameli;
                    el.checkName = item.nameli;
                    el.checkIndex = item.id;
                    el.ischeck = false;
                }
                return el;
            });
        },
    },
};
</script>

<style lang="less" scope>
@import url('../../assets/css/public.css');

.localLife {
    .j_lstj_ul3 a dl dt {
        width: 9.3867rem;
        margin-left: 0.64rem;
    }
    .j_lstj_ul3 a dl h1 {
        display: block;
        margin: 0.1rem 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: auto;
    }
    .j_lstj_ul3 a dl {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .search_list_dump ul li {
        width: 23.5%;
    }
    // 选择列表
    .j_check_box {
        position: relative;
    }
    .j_sel_option {
        border-top: 1px solid #e0e0e0;
        position: absolute;
        left: -0.4267rem;
        top: 1.91rem;
        max-height: 5rem;
        overflow-y: auto;
        width: 100%;
        background: #fff;
        z-index: 1000;
        display: block;

        .j_sel_optionactive {
            color: #fe333d;
        }

        li {
            float: none;
            height: 1.5667rem;
            line-height: 1.5667rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.85rem;
            width: 100%;
        }
    }

    .shadow {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999999;
        background: rgba(0, 0, 0, 0.5);
    }
}
</style>
